<template>
	<view>
		<v-leaflet ref="myleafletwx"></v-leaflet>
	</view>
</template>

<script>
    const plugin = requirePlugin('zhgeo-plugin')
	
	export default {
		data() {
			return {
				
			}
		},
		onLoad() {
			// const container = this.selectComponent('#gd-leafletwx')
			const container = this.$refs.myleafletwx
			let that = this;
			let min_zoom = 1
			let max_zoom = 5
			let zoom = 1
			let img_width = 2636;   // 手绘地图原始图片宽度
			let img_height = 1836;  // 手绘地图原始图片高度
			let leftUpLatLng = {latitude: 32.460662, longitude: 105.849642};	// 手绘地图左上角(图片坐标[0,0])的经纬度坐标
			let rightDownLatLng = {latitude: 32.454417, longitude: 105.878719}	// 手绘地图右下角(图片坐标[2635,1836])的经纬度坐标
			container.initLeafletMap(function(L) {
              wx.leaflet ??= {}
              wx.leaflet.L = L;
                require('../../static/lib/mymap/rastercoords')
                var map = L.map(container, {
                    crs: L.CRS.Simple,
                    minZoom: min_zoom,
                    maxZoom: max_zoom});
                let imgSize = [
                  img_width, // original width of image
                  img_height  // original height of image
                ];
                let rc = new L.RasterCoords(map, imgSize);
                map.setView(rc.unproject([img_width / 2, img_height / 2]), zoom);
                L.tileLayer('https://zz2022.com:8100/mtiles/out/{z}/{x}/{y}.png', {
                noWrap: true,
                bounds: rc.getMaxBounds(),
                // maxNativeZoom: that.rc.zoomLevel()
                }).addTo(map)
			});
		},
		methods: {
		}
	}
</script>

<style>

</style>
